import QtQuick 2.0
import Sailfish.Silica 1.0

PathView {
    id: view
    interactive: true

    //单个子项宽高
    property real itemWidth: view.width
    property real itemHeight: view.height

    //子项排列方向
    property int orientation: Qt.Horizontal

    // 标记子项尺寸，水平排列取宽，垂直排列取高
    property real _itemSize: orientation === Qt.Horizontal ? itemWidth : itemHeight

    // half of the centre item, plus the number of items partially or fully
    // visible in half the view
    property real _multiplier: Math.ceil((view.width / 2) / view._itemSize) + (pathItemCount <= 2 ? 0 : 0.5)

    //上一次的偏移量，索引
    property real _prevOffset: 0

    //设置属性：滚动减速、滚动最大速度、宽、高、高亮显示
    flickDeceleration: Theme.flickDeceleration
    maximumFlickVelocity: Theme.maximumFlickVelocity * width / Screen.height
    width: parent ? parent.width : Screen.width
    height: parent ? parent.height : Screen.width
    preferredHighlightBegin: _multiplier / pathItemCount
    preferredHighlightEnd: _multiplier / pathItemCount
    snapMode: PathView.SnapOneItem

    //dragging表示滚动中
    //此函数，应对offset突然变化特别大哪种情况
    onOffsetChanged: {
        if (snapMode == PathView.SnapOneItem && dragging) {
            var delta = Math.abs(Math.floor(_prevOffset) - Math.floor(offset))
            if (delta == 1 || delta == count - 1) {
                offset = _prevOffset
            }
        }
        _prevOffset = offset
    }

    // 这里表示pathview会一次性布局多少子项
    //pathView的渲染机制是，只渲染看得见
    //但是并不完全是只看得见的
    //为了滚动或者切换的流畅性，会额外布局一些子项
    pathItemCount: (itemWidth < 1 || (count <= 2 && itemWidth >= width)) ? 2 : Math.max(3, Math.ceil(width / itemWidth) + 1)


    path: Path {
        id: path
        startX:  -(view.itemWidth * view._multiplier - view.width / 2)
        startY: view.itemHeight / 2

        PathLine {
            x:  (view.pathItemCount * view.itemWidth) + path.startX
            y:   view.itemHeight / 2
        }
    }

//    path: Path {
//        id: path
//        startX: orientation === Qt.Horizontal ? -(view.itemWidth * view._multiplier - view.width / 2)
//                                              :  view.itemWidth / 2
//        startY: orientation === Qt.Horizontal ? view.itemHeight / 2
//                                              : -(view.itemHeight * view._multiplier - view.height / 2)

//        PathLine {
//            x: orientation === Qt.Horizontal ? (view.pathItemCount * view.itemWidth) + path.startX
//                                             : view.itemWidth / 2
//            y: orientation === Qt.Horizontal ?  view.itemHeight / 2
//                                             : (view.pathItemCount * view.itemHeight) + path.startY
//        }
//    }
}
